<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>简单的cs3效果</title>
  <script src="vue.js"></script>
  <link rel="stylesheet" href="css/animate.css">
  <style>
    @keyframes  bounce-in{
      0%{
        transform:scale(0);
      }
      50%{
        transform:scale(1.5);
      }
      100%{
        transform:scale(2);
      }
    }
     .active{
        transform-origin:left center;
        animation:bounce-in  5s;
     }
      .leave{
        transform-origin:left center;
        animation:bounce-in  5s  reverse;
      }
    /*不使用默认的class.fade-enter-active、.fade-leave-active;自己可定义两个class,使用enter-active-class和leave-active-class即可*/
  </style>
</head>
<body>
<div id="app">
    <transition name="fade" enter-active-class="active" leave-active-class="leave">
        <div v-show="show">hello world</div>
    </transition>
    <button @click="handelBtnClick">change</button>
</div>
<script>
  var vm=new Vue({
    el:"#app",
    data:{
        show:true
    },
    methods:{
      handelBtnClick:function(){
           this.show=!this.show
      }
    }
  })
</script>
</body>
</html>
